<template>
  <div class="ppmMain" style="padding: 0 40px;box-sizing: border-box">
    <div class="sky_main_box">
      <h4 class="sky_ppm_detail_title">{{p_name}}  <span class="">/  {{child_name}}</span></h4>
      <div class="sky_pm_detail_box">
        <div v-if="main!=''" class="sky_ppm_header">
          <h3 class="sky_return" @click="goBack"><i class='sky-icon-return'></i>返回</h3>
          <h3 class="sky_incoming_title">{{main.name}}</h3>
          <h3 class="ppm_number_box mustRight"><span class="ppm_number">{{main.value}}</span>
            <a class="ppm_standard">
              <i :class="[{'sky-icon-nordown':main.yty>0},
              {'sky-icon-impdown':main.yty<0 && main.yty>-30},
              {'sky-icon-standard':main.yty==0},{'sky-icon-impdown':main.yty<-30}]"></i>
              {{main.yty}}%  <span>同比标准</span></a>
          </h3>
          <div class="sky_ppm_desc" v-html="main.desc">
          </div>
        </div>
        <div class="date_chart_box">
          <div class="sky_main_title">
            <div class="block sky_date">
              <el-date-picker
                v-model="monthDate"
                @change="changeDay"
                type="month"
                placeholder="选择月份">
              </el-date-picker>
            </div>
          </div>
          <div id="myChart" style="height:400px;width:100%"></div>
        </div>
        <div class="sky_gc-chart">
          <div class="sky_main_title sky_fault">
            <h3 v-if="main!=''" class="sky_coming_title">{{main.name}}构成</h3>
            <div class="block sky_date">
              <el-date-picker
                v-model="pmDate"
                type="month"
                @change="changePie"
                placeholder="选择月份">
              </el-date-picker>
            </div>
          </div>
          <div v-if="productList.length>0" class="pro_box">
            <span v-for="(pro,index) in productList" @click="changePro(pro,index)" :class="{'active_pro':flog==index}">{{pro}}</span>
          </div>
          <div id="mybar" style="height:400px;width:100%">
          </div>
        </div>
        <div class="sky_chart_pie">
          <div class="sky_main_title">
            <h3 class="sky_fault_type">事故类型</h3>
            <h3 class="sky_fault_sum">{{sum}} <span>总计</span></h3>
          </div>
          <div id="mypie" style="height:400px;width:100%"></div>
        </div>
      </div>
      <div v-if="proposal.length>0" class="sky_ex_box">
        <h3>最新异常</h3>
        <div class="sky_ex_table">
          <table>
            <tr>
              <th>产品</th>
              <th>发生时间 </th>
              <th>等级</th>
              <th>问题描述</th>
              <th>问题分类</th>
              <!--<th>结果</th>-->
              <th>责任人</th>
              <th>状态</th>
              <th>关闭时间</th>
              <th>指标类型</th>
              <th>8D</th>
            </tr>
            <tr v-for="p in proposal">
              <!--<router-link :to="'/layout/issue_bill/'+p.id" tag="td">{{p.data.product}}</router-link>-->
              <div style="cursor: pointer" @click="toDetail(p)">{{p.data.product}}</div>
              <div style="cursor: pointer" @click="toDetail(p)">{{p.createTime | changeTime}}</div>
              <div style="cursor: pointer" @click="toDetail(p)" :class="[{'red':p.data.level==1},{'org':p.data.level==2},{'yel':p.data.level==3},{'blue':p.data.level==4}]">
                {{ p.data.level | changeLevel }}
              </div>
              <div style="cursor: pointer" @click="toDetail(p)">{{p.data.desc}}</div>
              <div style="cursor: pointer" @click="toDetail(p)">{{p.data.category}}</div>
              <div style="cursor: pointer" @click="toDetail(p)">{{p.creator}}</div>
              <div style="cursor: pointer" @click="toDetail(p)">
                <span v-if="p.status=='open'">未解决</span>
                <span v-if="p.status=='close'">已解决</span>
                <span v-if="p.status=='stop'">暂停</span>
              </div>
              <div style="cursor: pointer" @click="toDetail(p)">{{p.updateTime | changeTime}}</div>
              <div style="cursor: pointer" @click="toDetail(p)">{{p.result}}</div>
              <div style="cursor: pointer" @click="toDetail(p)" v-if="p.data.edReport!=undefined" :to="'/layout/pro/'+p.data.edReportId">
                {{p.data.edReport.stage}}
              </div>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState,mapActions} from 'vuex'
  import {trYty,getDays,changeTime,changeLevel,getDay,getYearMonth} from '../../../util/filter'
  import qs from 'qs'
  export default{
    data() {
      return {
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        month:'',
        monthList:[
          {title:'1月',value:1},
          {title:'2月',value:2},
          {title:'3月',value:3},
          {title:'4月',value:4},
          {title:'5月',value:5},
          {title:'6月',value:6},
          {title:'7月',value:7},
          {title:'8月',value:8},
          {title:'9月',value:9},
          {title:'10月',value:10},
          {title:'11月',value:11},
          {title:'12月',value:12}],
        radio: '1',
        p_name:'',
        child_name:'',
        monthDate:'',
        pmDate:'',
        main:'',
        proposal:[],
        productList:[],
        flog:0,
        proTitle:'',
        sum:0
      };
    },
    created(){
    },
    mounted(){
      if (localStorage.getItem("protitle")!=undefined && localStorage.getItem('protitle')!=''){
        this.proTitle= localStorage.getItem("protitle")
      }
      if (this.$route.query.name!=''){
        var str=this.$route.query.name
        var index = str.indexOf('\-');
        this.p_name=str.substr(0,index);
        this.child_name = str.substr(index + 1,str.length);
        this.monthDate=this.$route.query.time;
        this.pmDate=this.$route.query.time;
      }
      this.getDic();
      this.getStructure();
      this.getDetailMain();
      this.getDayDetail();
    },
    filters:{
      "changeLevel":changeLevel,
      "changeTime":changeTime
    },
    methods: {
      ...mapActions(['back']),
      drawLine(ppmTick,ppm,dayPPm,maxNumber,index){
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        var colors = ['#5793f3', '#d14a61', '#675bba','#fff'];
        myChart.setOption({
          color: colors,
          grid: {
            right: '3%',
            left:'5%',
            borderWidth:0,
            show:false
          },
          legend: {
          },
          dataZoom: {
            show: true,
            realtime: true,
            y:390,
            height:40,
            start: 60,
            end: 100,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisTick: {
                alignWithLabel: false
              },
              data: ppmTick,
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel : {
                textStyle: {
                  color: '#999cb1',
                  fontSize:16
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                show:false,
                lineStyle: {
                  color: colors[3]
                }
              },
              axisTick: {
                show: false
              }
            },
            {
              type: 'value',
              max:maxNumber,
              min:0,
              boundaryGap: false,
              position: 'left',
              nameGap:30,
              borderWidth:3,
              axisLine: {
                show: false,
                lineStyle: {
                  color: colors[2],
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#999cb1',
                  fontSize:16
                }
              }
            }
          ],
          series: [
            {
              type:'bar',
              label: {
                normal: {
                  show: false
                }
              },
              barWidth:15,
              symbol:'none',
              smooth:true,
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 1, color: '#c9e3ff'},
                      {offset: 0.5, color: '#dfeeff'},
                      {offset:0 , color: '#edf6ff'}
                    ]
                  )
                }
              },
              data:dayPPm
            },
            {
              type:'line',
              yAxisIndex:1,
              symbol: 'emptyCircle',
              /**
               * 该段莫名会导致线段段落出错，目的不明，暂时屏蔽
               * **/
              // symbolSize:function (value,params) {
              //   if (params.dataIndex==index){
              //     return 6
              //   }else{
              //     return 0
              //   }
              //   if (value==maxNumber){
              //     return 6
              //   }else{
              //     return 0
              //   }
              // },
              label: {
                normal: {
                  show: false,
                }
              },
              data:ppm,
              markPoint: {
                itemStyle:{
                  normal: {
                    symbol: 'rect',
                    symbolSize:[54, 25],
                    symbolOffset:[0,'-75%'],
                    color:'#fff',
                    label:{
                      fontSize:14,
                      padding:8,
                      borderRadius:3,
                      color:'#fff',
                      backgroundColor:'#3384dd'
                    }
                  },
                  emphasis: {
                    symbol: 'circle',
                    symbolSize:10,
                    borderColor: '#1e90ff',
                    borderWidth: 5,
                    label: {
                      show: false,
                      distance:'top',
                      position:[0,'50%']
                    }
                  }
                },
                effect : {
                  show: true,
                  shadowBlur : 0
                },
                data: [
                  // {type: 'max', name: '最大值'},
                  // {type: 'min', name: '最大值'}
                ],
              }
            }
          ]
        })
        myChart.resize();
      },
      drawBar(day,serieList,name){
        let mybar = this.$echarts.init(document.getElementById('mybar'));
        mybar.setOption({
          legend: {
            data:name,
            left:'right',
            padding:[0,40,0,0]
          },
          grid: {
            left: '5%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          dataZoom: {
            show: true,
            realtime: true,
            y:390,
            height:40,
            start: 0,
            end: 80
          },
          xAxis : [{
            type : 'category',
            data : day,
            max:20,
            axisTick: {
              show: false, //取消刻度
            },
            axisLine: {
              show: false,
            },
            axisLabel:{
              interval:0,
              margin:10,
              textStyle: {
                align:'left',
                baseline:'middle'
              }
            },
          }
          ],
          yAxis : [
            {
              type : 'value',

              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              }
            }
          ],
          barWidth:15,
          series:serieList
        })
        mybar.resize();
      },
      drawPie(pie){
        let mypie = this.$echarts.init(document.getElementById('mypie'));
        mypie.setOption({
          series : [
            {
              name: '访问来源',
              type: 'pie',
              radius :['15%','65%'],
              center: ['50%', '48%'],
              data:pie,
              itemStyle: {
                normal:{
                  label:{
                    fontSize:16,
                    show:true,
                    formatter:function(val){   //让series 中的文字进行换行
                      return val.name.split("、").join("\n").split("-").join("\n");
                    }
                  },
                  labelLine:{
                    show:true
                  }
                }
              },
            }

          ]
        })
        mypie.resize();

      },
      detail(){
        this.$router.push({path:'/layout/pro/0'})
      },
      getStructure(){
        let self = this
        let month=this.pmDate;
        let target=this.$route.query.item;
        let params={
          month:month,
          target:target
        }
        if (this.proTitle!=''&& this.proTitle!='全部'){
          params['item']=this.proTitle;
        }
        self.$http.get(self.conURL + 'pm/api/detail/structure?' + qs.stringify(params)).then(result => {
          let res = result.data
          let data=res.days;
          let dayList=[];
          for (var i=0;i<data.length;i++){
            dayList.push(getDays(data[i]));
          }
          let serieList=[];
          let colorList=['#8b9bfa','#ffcc40','#fb9440'];
          let name=[]
          if (res.dim.length>0){
            for (var i=0;i<res.dim.length;i++){
              var dim={};
              dim["type"]="bar";
              dim["name"]=res.dim[i].name;
              let datas=[];
              for (var j=0;j<res.dim[i].data.length;j++){
                if(res.dim[i].data[j]!==null && res.dim[i].data[j]>0){
                  datas.push(res.dim[i].data[j])
                }else{
                  datas.push('');
                }
              }
              dim["data"]=datas;
              dim["barGap"]='50%'
              dim["itemStyle"]={
                normal:{
                  color:colorList[i],
                  label : {show: true, position: 'top'}
                }
              },
                name.push(res.dim[i].name);
              serieList.push(dim);
            }
            this.drawBar(dayList,serieList,name);
          }
        }).catch(error=>{
          console.log(error);
        });
      },
      getDetailMain(){
        let self = this
        let month=this.pmDate;
        let target=this.$route.query.item;
        let params={
          month:month,
          target:target
        }
        if (this.proTitle!=''&& this.proTitle!='全部'){
          params['item']=this.proTitle;
        }
        self.$http.get(self.conURL + 'pm/api/detail?' + qs.stringify(params)).then(result => {
          let res = result.data
          let pieData=[];
          let type=res.type;
          this.main=res.data;
          this.proposal=res.proposal;
          let num=0;
          let color=['#8b9bfa','#ffcc40','#f87b44','#2cc2ed','#378bf4']
          if (type.length>0){
            for(var i=0;i<type.length;i++){
              var pie={};
              pie["value"]=type[i].value;
              pie["name"]=type[i].name+'-   '+type[i].value;
              num+=parseInt(type[i].value);
              if(i>color.length){
                pie["itemStyle"]={
                  normal:{
                    color:color[i-color.length]
                  }
                }
              }else if(i==color.length){
                pie["itemStyle"]={
                  normal:{
                    color:'#85c227'
                  }
                }
              }else{
                pie["itemStyle"]={
                  normal:{
                    color:color[i]
                  }
                }
              }
              pieData.push(pie);
            }
          }else{
            var pie={
              value:0,
              name:'暂无',
              itemStyle:{
                normal:{
                  color:'#ffcc40'
                }
              }
            };
            pieData.push(pie);
          }
          this.sum=num;
          this.drawPie(pieData);
          for (let i = 0; i < this.proposal.length; i++){
            if (this.proposal[i].data.desc != undefined){
              var oldVal = this.proposal[i].data.desc.replace(/<\/?.+?>/g,"");
              this.proposal[i].data.desc = oldVal.replace(/ /g,"");
            }
          }
        }).catch(error=>{
          console.log(error);
        });
      },
      getDayDetail(){
        let self = this
        let target=this.$route.query.item;
        let month=this.monthDate;
        let params={
          month:month,
          target:target
        }
        if (this.proTitle!='' && this.proTitle!='全部'){
          params['item']=this.proTitle;
        }
        self.$http.get(self.conURL + 'pm/api/detail/day/new?' + qs.stringify(params)).then(result => {
          let res = result.data
          let ppmTick=[];
          let ppm=[];
          let dayPPm=[];
          let year=new Date().getFullYear();
          let month=new Date().getMonth()+1;
          let day= new Date().getDate();
          let index=0;
          let mydate=new Date(year+'-'+month+'-'+day)/1000;
          if (res.length>0){
            for (var i=0;i<res.length;i++){
              if (mydate==res[i].day){
                ppmTick.push('今日');
                index=i;
                dayPPm.push(parseInt(res[i].value))
              }else {
                ppmTick.push(getDay(res[i].day));
                dayPPm.push('')
              }
              ppm.push(parseInt(res[i].value))
            }
            var maxNumber=Math.ceil(Math.max.apply(null,ppm));
            if (maxNumber<=10){
              maxNumber;
            } else if(maxNumber>10 && maxNumber<=100){
              maxNumber =100;
            }else{
              let number=parseInt(maxNumber/100);
              if (number<10){
                maxNumber=100*(number+2)
              }else{
                maxNumber=200*(number+2)
              }
            }
            this.drawLine(ppmTick,ppm,dayPPm,maxNumber,index);
          }
        }).catch(error=>{
          // console.log(error,213);
          this.$notify({
            title: '警告',
            message: '未找到相关数据',
            type: 'warning'
          });
        })
      },
      changeDay(){
        this.monthDate=getYearMonth(this.monthDate);
        this.getDayDetail();
      },
      changePie(){
        this.pmDate=getYearMonth(this.pmDate);
        this.getDetailMain();
        this.getStructure();
      },
      getDic(){
        let self = this
        self.$http.get(self.conURL + 'mongo/api/docs/dictitem/product').then(result => {
          let res = result.data
          this.productList=res;
          for (var i=0;i<res.length;i++){
            if (this.proTitle==res[i]){
              this.flog=i+1;
            }
          }
          this.productList.unshift("全部")
        }).catch(error=>{
          console.log(error);
        });
      },
      changePro(item,index){
        this.flog=index;
        this.proTitle=item;
        this.getDetailMain();
        this.getStructure();
      },
      goBack(){
        this.$router.push('/index/purchase?type=采购管理')
      },
      toDetail(p){
        // console.log(p)
        this.$router.push({
          path:'/index/questionContent',
          query:p
        })
      }
    },
  }
</script>
<style lang="less">
  .ppmMain{
    .sky_date{
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }
    h3{
      margin-top: 0;
      margin-bottom: 0;
    }
    .productDiv{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      height: 140px;
      .pd_left{
        display: flex;
        flex-direction: row;
        span{
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .pdl_title{
          color: #848484;
          line-height: 140px;
          font-size: 28px;
        }
        .pdl_name{
          color: #3b3b3b;
          line-height: 140px;
          font-size: 28px;
          margin-right: 20px;
        }
        .pro_change{
          width: 54px;
          height: 26px;
          line-height: 26px;
          text-align: center;
          font-size: 14px;
          color: #ffffff;
          background: #3384dd;
          border-radius: 50px;
          padding: 0;
          margin-top: auto;
          margin-bottom: auto;
        }
      }
      .pd_right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-input__inner{
          padding-left: 20px;
          background-color: #e5e5e5;
          color: #636363;
          border-radius: 30px;
          border: 0px;
          font-size: 18px;
        }
      }
    }
    .font_color_up{
      color: #fd5b40 !important;
    }
    .font_color_pass{
      color: #3384dd !important;
    }
    .font_color_down{
      color: #4eb240 !important;
    }
    .sky_main_box{
      display: flex;
      flex-direction: column;
      padding-left: 0;
      padding-right: 0;
      .sky_pm_detail_box{
        background: #fff;
        .sky_ppm_header{
          display: flex;
          flex-direction: column;
          margin: 0px 24px;
          .sky_return{
            font-size: 20px;
            font-weight: 500;
            line-height: 48px;
            cursor: pointer;
            color: #222;
            margin: 0;
            margin-top: 18px;
            [class^="sky-icon"]{
              width: 30px;
              height: 30px;
              background: url(../../../assets/imgs/1-2.png) no-repeat;
              display: inline-block;
              vertical-align: middle;
              margin: 0px 3px 0px;
            }
            .sky-icon-return{
              background-position: -64px -277px;
            }
          }
          .sky_incoming_title{
            color: #333;
            font-size: 26px;
            font-weight: 500;
            line-height: 60px;
            margin: 0;
          }
          .ppm_number_box{
            display: flex;
            flex-direction: column;
            font-weight: 500;
            margin: 0;
            .ppm_number{
              font-size: 57px;
              font-weight: 500;
            }
            .ppm_standard{
              color: #999;
              font-size: 24px;
              font-weight: 500;
              line-height: 54px;
              [class^="sky-icon"]{
                width: 30px;
                height: 30px;
                background: url(../../../assets/imgs/1-2.png) no-repeat;
                display: inline-block;
                vertical-align: middle;
                margin: 0px 3px 0px;
              }
              .sky-icon-standard{
                background-position: -61px -239px;
                width: 20px;
              }
              .sky-icon-impdown{
                background-position: -63px -62px;
                width: 15px;
              }
              .sky-icon-whitedown{
                background-position: -63px -101px;
                width: 15px;
              }
              .sky-icon-lessdown{
                background-position: -63px -144px;
                width: 15px;
              }
              .sky-icon-impup{
                background-position: -111px -192px;
                width: 15px;
              }
            }
          }
          .mustRight{
            flex-direction: row !important;
          }
          .sky_ppm_desc{
            color: #666;
            font-size: 16px;
            letter-spacing: 2px;
            line-height: 27px;
            margin: 0;
            margin-top: 18px;
          }
        }
        .date_chart_box{
          display: inline-block;
          position: relative;
          border-bottom: 1px solid #e7e7e7;
          width: 100%;
          box-sizing: border-box;
        }
        .sky_gc-chart{
          float: left;
          display: inline-block;
          border-right: 1px solid #e7e7e7;
          padding: 0px;
          border: 0px;
          width: 65%;
          .sky_main_title{
            padding: 30px;
            .sky_coming_title{
              font-size: 18px;
              color: #333;
              font-weight: 500;
            }
          }
        }
        .sky_chart_pie{
          float: left;
          display: inline-block;
          width: 34%;
          float: right;
          border-left: 1px solid #e5e5e5;
          .sky_fault_type{
            color: #333;
            line-height: 48px;
            font-size: 20px;
            text-indent: 30px;
            margin-top: 20px;
            font-weight: 500;
          }
          .sky_fault_sum{
            font-size: 30px;
            text-indent: 30px;
            color: #3384dd;
            line-height: 40px;
            font-weight: 400;
          }
        }
      }
      .sky_ex_box{
        background: #fff;
        border: 1px solid #e7e7e7;
        border-radius: 3px;
        margin-top: 20px;
        background: #fff;
        margin-bottom: 50px;
        .title{
          display: block;
          color: #333;
          font-size: 20px;
          text-indent: 20px;
          line-height: 40px;
          border-bottom: 1px solid #e7e7e7;
        }
        table{
          color: #666;
          display: inline-block;
          width: 100%;
          tr{
            border-bottom: 1px solid #e7e7e7;
            line-height: 35px;
            padding: 0px 20px;
            width: 100%;
            display: inline-block;
            th{
              text-align: left;
              display: inline-block;
              width: 7%;
              padding: 0px 5px;
            }
            div{
              text-align: left;
              display: inline-block;
              width: 7%;
              overflow: hidden;
              padding: 0px 5px;
              text-overflow: ellipsis;
              -moz-text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          tr:nth-child(1){
            background-color: #fafafa;
          }
        }
      }
    }
  }
</style>
